<template>
  <div>
    <!-- 头部 -->
    <div class="head">
      当前城市 -
      <i class="iconfont icon-cuowu" @click="back"></i>
    </div>
    <!-- 搜索 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="输入城市名或拼音"
        @click="onSearch"
        @blur="onBlur"
        class="search"
      />
    </form>
    <!-- hotcity -->
    <div class="hotcity">
      <p>热门城市</p>
      <span
        v-for="(item, index) in hotcity"
        :key="index"
        @click="changeCity(item.name, item.cityId)"
        >{{ item.name }}</span
      >
    </div>
    <!-- 城市列表 -->
    <van-index-bar :index-list="indexList">
      <div v-for="(item, key) in cityList" :key="key">
        <van-index-anchor class="title" :index="key">{{
          key
        }}</van-index-anchor>
        <van-cell
          v-for="v in item"
          :key="v.cityId"
          :title="v.name"
          @click="change(v.name, v.cityId)"
        />
      </div>
    </van-index-bar>
  </div>
</template>
<script>
import Vue from 'vue'
import { IndexBar, IndexAnchor, Cell, Search } from 'vant'
import api from '@/api/index.js'
import { mapMutations } from 'vuex'
Vue.use(IndexBar)
Vue.use(IndexAnchor)
Vue.use(Cell)
Vue.use(Search)
export default {
  data() {
    return {
      indexList: [],
      // 定义26个字母组成的数组
      words: [],
      // 定义数据
      cityList: {}, // {A[{a开头的城市1},{a开头的城市2}]}
      hotcity: [],
      value: ''
    }
  },
  methods: {
    back() {
      this.$router.push('/movie/playing')
    },
    onSearch() {
      var button = document.querySelector(
        '.van-search__action[data-v-30a6a9c8]'
      )
      button.style.display = 'block'
    },
    onBlur() {
      var button = document.querySelector(
        '.van-search__action[data-v-30a6a9c8]'
      )
      button.style.display = 'none'
      this.value = ''
    },
    changeCity(n, cityId) {
      this.add(n)
      this.changeCityId(cityId)
      this.$router.push('/movie')
      // console.log(n, cityId)
      // console.log(this)
    },
    change(n, cityId) {
      this.add(n)
      this.changeCityId(cityId)
      this.$router.push('/movie')
      // console.log(n, cityId)
      // console.log(this)
    },
    ...mapMutations(['add']),
    ...mapMutations(['changeCityId'])
  },
  created() {
    // 定义26字母
    for (let i = 65; i <= 90; i++) {
      this.words.push(String.fromCharCode(i))
    }
    this.$http.get(api.getCity).then((res) => {
      console.log(res)
      // console.log(res.data.cities) // 最终需要从这个里面筛选数据
      // 从26字母中筛选需要的，放到indexList中
      // 循环words
      this.words.forEach((word) => {
        res.data.cities.forEach((item) => {
          // console.log(item)

          if (item.pinyin[0].toUpperCase() === word) {
            // 判断数组中有没有，没有就放
            // 放到cityList中
            if (this.indexList.indexOf(word) < 0) {
              this.indexList.push(word)
            }
            if (!this.cityList[word]) {
              this.cityList[word] = []
            }
            this.cityList[word].push(item)
            if (item.isHot === 1) {
              this.hotcity.push(item)
            }
          }
        })
      })
    })
  }
}
</script>
<style lang="scss" scoped>
.head {
  width: 100%;
  height: 44px;
  background-color: #fff;
  line-height: 44px;
  text-align: center;
  font-size: 17px;
  font-size: 17px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  i {
    position: absolute;
    left: 10px;
    top: 0;
    font-weight: normal;
  }
}
.search {
  width: 100%;
  height: 49px;
  background-color: #f4f4f4;
  padding: 9.5px 10px;
  margin-top: 44px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  .van-search__content {
    background-color: #fff;
  }
  .van-search__action {
    display: none;
  }
}
.hotcity {
  width: 100%;
  font-size: 13px;
  color: #797d82;
  margin-top: 110px;
  p {
    margin-left: 13px;
  }
  span {
    display: inline-block;
    width: 25%;
    margin-left: 10px;
    background-color: #fff;
    height: 30px;
    background-color: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 13px 13px 10px;
    font-size: 14px;
    color: #191a1b;
    text-align: center;
  }
}
.title {
  width: 92%;
  height: 30px;
  background-color: #f4f4f4;
  color: #797d82;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
}
</style>